<template>
  <van-skeleton title :row="3" style="margin-top:10px;" :loading="false">
    <div>
      <div class="ha">
        <van-nav-bar title="订单" fixed="true" />
      </div>
      <van-tabs @click-tab="tabac" v-model="active" swipeable animated color="red">
        <van-tab title="未接单" style="margin-top:10px">
          <van-skeleton title row="3" :loading="loading">
            <div class="exam-container" v-for="(item, index) in orders" :key="index">
              <van-tag type="primary">供应商</van-tag>&nbsp;
              <strong>{{ item.supplier }}</strong>
              <span class="ordernum">{{ item.id }}</span>
              <!-- <div class="hr"></div> -->
              <div style="margin-top:5px">
                <div v-for="(details, index) in item.details" :key="details.id">
                  <van-row class="div1">
                    <van-col span="24">
                      <img
                        style="float: left;"
                        class="img"
                        width="40"
                        height="40"
                        :src="details.photo"
                      />
                      <span style="float: left;" class="content">{{ details.name }}</span>
                      <span style="float: left;" class="specifications2">{{ details.specs }}</span>
                      <span
                        style="float: left;"
                        class="price"
                      >￥{{ details.isPromote ===1?details.promotePrice: details.price }}</span>
                      <span style="float: left;" class="count">&nbsp;&nbsp;x{{ details.number }}</span>
                      <span style="float:right;" class="pricenum">
                        <a style="color: red;">￥{{ details.money }}</a>元
                      </span>

                      <p class="date">生产日期：{{ details.birthday }} 保质期：{{ details.expiryday }}天</p>
                      <div class="hr"></div>
                      <div>
                        <span
                          v-if="item.details.length === index + 1"
                          class="totalok"
                        >总计：￥{{ item.money }}元</span>
                      </div>
                    </van-col>
                  </van-row>
                </div>
                <img
                  class="shippeda"
                  v-if="item.isAccept==-1"
                  width="40"
                  height="40"
                  src="../../img/daidan.png"
                />
                <img class="shippedad" v-else width="40" height="40" src="../../img/cancel.png" />
              </div>
              <!-- <div class="hr"></div> -->
              <span class="xiadan">{{ item.time }} 下单</span>
              <div style="float: right;position: relative;left:42px;">
                <van-button
                  type="danger"
                  v-if="item.isAccept==-1"
                  size="mini"
                  @click="cancel(item)"
                >取消订单</van-button>
                <van-tag v-else>已取消</van-tag>
              </div>
            </div>
            <div v-if="orders.length > 0">
              <van-divider contentPosition="center">没有更多数据了</van-divider>
            </div>
            <div v-if="orders.length === 0">
              <van-empty
                image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
                image-size="180"
                description="暂无数据"
              />
            </div>
          </van-skeleton>
        </van-tab>

        <van-tab title="进行中">
          <van-skeleton title row="3" :loading="loading">
            <div v-if="orders.length === 0">
              <van-empty
                image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
                image-size="180"
                description="暂无数据"
              />
            </div>
            <div class="exam-container" v-for="(item) in orders" :key="item.id">
              <strong>{{ item.supplier }}</strong>
              <span class="ordernum">{{ item.id }}</span>
              <!-- <div class="hr"></div> -->
              <div>
                <div v-for="(details, index) in item.details" :key="details.id">
                  <van-row class="div2">
                    <van-col span="24">
                      <img
                        style="float: left;"
                        class="img"
                        width="40"
                        height="40"
                        :src="details.photo"
                      />
                      <span style="float: left;" class="content2">{{ details.name }}</span>
                      <span style="float: left;" class="specifications2">{{ details.specs }}</span>
                      <span
                        style="float: left;"
                        class="price"
                      >￥{{ details.isPromote ===1?details.promotePrice: details.price }}</span>
                      <span style="float: left;" class="count">&nbsp;&nbsp;×{{ details.number }}</span>
                      <p style="float:right;" class="pricenum">
                        <a style="color: red;">￥{{ details.money }}</a>元
                      </p>

                      <p class="date2">
                        保质期至：{{ details.expirydayDate }}
                        <span
                          style="float: right;"
                          class="totalok2"
                        >实付：￥{{ item.receiveMoney }}元</span>
                      </p>
                      <div class="hr"></div>
                      <p v-if="item.details.length === index + 1" class="ing2">
                        应付：
                        <del>￥{{ item.money }}</del> 元，实付
                        <span style="color: red;">￥{{ item.receiveMoney }}</span> 元
                      </p>
                      <!-- <img class="imgok" width="40" height="40" src="../../assets/待接单.png" /> -->
                    </van-col>
                  </van-row>
                </div>
              </div>
              <span class="xiadan">2024-03-04 14:22 下单</span>
              <span class="shouhuo" @click="isShow(item)">
                {{
                item.receives.length }}条收货信息
              </span>
              <van-tag
                style="float: right; margin-top:5px;"
                type="warning"
                v-if="item.isReceive===1"
              >待确认</van-tag>
              <van-button
                class="but2"
                v-if="item.isSend==1 && item.isReceive==0"
                size="mini"
                type="success"
                @click="shouhuo(item.id)"
              >收货</van-button>
              <van-button
                class="but3"
                block
                v-if="item.isSend==0 && item.isCancel==0 "
                size="mini"
                type="danger"
                @click="cancel(item)"
              >取消订单</van-button>
              <van-tag style="float: right;margin-top:5px"  v-if="item.isCancel==1">已取消</van-tag>
              <img
                v-if="item.isSend == 1 && item.isReceive == 0 && item.isComplete == 0"
                class="shipped"
                src="../../img/send.png"
              />
              <img
                v-if="item.isSend != 1 &&item.isCancel!=1 "
                class="shippeds"
                src="../../img//nosend.png"
              />
              <img v-if="item.isReceive===1" class="shippeds" src="../../img//nook.png" />
              <img
                v-if=" item.isCancel==1"
                class="shippeds"
                src="../../img//cancel.png"
              />
            </div>
            <div v-if="orders.length > 0">
              <van-divider contentPosition="center">没有更多数据了</van-divider>
            </div>
          </van-skeleton>
        </van-tab>

        <van-tab title="已完成">
          <van-skeleton title row="3" :loading="loading">
            <div v-if="orders.length === 0">
              <van-empty
                image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
                image-size="180"
                description="暂无数据"
              />
            </div>
            <div class="exam-container" v-for="(item, index) in orders" :key="index">
              <van-tag type="primary">供应商</van-tag>&nbsp;
              <strong>{{ item.supplier }}</strong>
              <span class="ordernum">{{ item.id }}</span>
              <!-- <div class="hr"></div> -->
              <div style="margin-top:5px">
                <div v-for="(details, index) in item.details" :key="details.id">
                  <van-row class="div1">
                    <van-col span="24">
                      <img
                        style="float: left;"
                        class="img"
                        width="40"
                        height="40"
                        :src="details.photo"
                      />
                      <span style="float: left;" class="content">{{ details.name }}</span>
                      <span style="float: left;" class="specifications3">{{ details.specs }}</span>
                      <span
                        style="float: left;"
                        class="price"
                      >￥{{ details.isPromote ===1?details.promotePrice: details.price }}</span>
                      <span style="float: left;" class="count">&nbsp;&nbsp;×{{ details.number }}</span>
                      <span style="float:right;" class="pricenum">
                        <a style="color: red;">￥{{ details.money }}</a>元
                      </span>

                      <p class="date">
                        保质期至：{{ details.expirydayDate }}
                        <span
                          style="color: red;float:right;"
                        >实收：￥{{ details.receiveMoney }}元</span>
                      </p>
                      <div class="hr"></div>
                      <div>
                        <span v-if="item.details.length === index + 1" class="totalok3">
                          应收：
                          <span style="color: red;">￥{{ item.money }}</span>元，实收：
                          <span style="color: red;">￥{{ item.receiveMoney }}</span>元
                        </span>
                      </div>
                    </van-col>
                  </van-row>
                </div>
              </div>
              <img class="pendingOrders" src="../../img/ok.png" />
              <!-- <div class="hr"></div> -->
              <span class="xiadan">{{ item.time }}-下单</span>
              <span class="xiadans" style="float: right; margin-top:4px;">{{ item.sendTime }}-完成</span>
            </div>
            <div v-if="orders.length > 0">
              <van-divider contentPosition="center">没有更多数据了</van-divider>
            </div>
          </van-skeleton>
        </van-tab>

        <van-tab title="已取消">
          <van-skeleton title row="3" :loading="loading">
            <div v-if="orders.length === 0">
              <van-empty
                image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
                image-size="180"
                description="暂无数据"
              />
            </div>
            <div class="exam-container" v-for="(item, index) in orders" :key="index">
              <van-tag type="primary">供应商</van-tag>&nbsp;
              <strong>{{ item.supplier }}</strong>
              <span class="ordernum">{{ item.id }}</span>
              <!-- <div class="hr"></div> -->
              <div style="margin-top:5px">
                <div v-for="(details, index) in item.details" :key="details.id">
                  <van-row class="div4">
                    <van-col span="24">
                      <img
                        style="float: left;"
                        class="img"
                        width="40"
                        height="40"
                        :src="details.photo"
                      />
                      <span style="float: left;" class="content">{{ details.name }}</span>
                      <span style="float: left;" class="specifications3">{{ details.specs }}</span>
                      <span
                        style="float: left;margin-top:3px"
                        class="price"
                      >￥{{ details.isPromote ===1?details.promotePrice: details.price }}</span>
                      <span
                        style="float: left;margin-top:5px"
                        class="count"
                      >&nbsp;&nbsp;×{{ details.number }}</span>
                      <span style="float:right;" class="pricenum">
                        <a style="color: red;">￥{{ details.money }}</a>元
                      </span>

                      <p class="date">生产日期：{{ details.birthday }} 保质期：{{ details.expiryday }}天</p>
                      <div>
                        <span v-if="item.details.length === index + 1">
                          <span class="xiadan">取消时间：{{ item.time }}</span>
                          <span class="tag4" v-if="item.cancelType === 1">商户取消</span>
                          <span class="tag4" v-else>供应商取消</span>
                          <span class="totalok">总计：￥{{ item.money }}元</span>
                        </span>
                      </div>

                      <!-- <img class="imgok" width="40" height="40" src="../../assets/待接单.png" /> -->
                    </van-col>
                  </van-row>
                </div>
                <img class="shippeds" src="../../img/cancel.png" />
              </div>
            </div>
            <div v-if="orders.length > 0">
              <van-divider contentPosition="center">没有更多数据了</van-divider>
            </div>
          </van-skeleton>
        </van-tab>
      </van-tabs>
      <!-- 进行中 收货信息 -->
      <van-overlay :show="show" @click="show = false">
        <div class="wrapper" @click.stop>
          <div class="block">
            <div
              style="text-align: center;border-bottom: 1px solid bisque;margin-top: 15px;padding-bottom: 10px;"
            >收货信息</div>

            <van-collapse v-model="activeName" accordion>
              <van-collapse-item
                v-for="ite in receive"
                :key="ite"
                :title="ite.time"
              >【商户】{{ite.time}}收货，收货金额【{{ ite.money }}】，被拒绝</van-collapse-item>
            </van-collapse>
            <van-button style="width: 100%;color: red;" type="default" @click="show=false">确认</van-button>
          </div>
        </div>
      </van-overlay>
      <!-- 收货信息end -->
    </div>
  </van-skeleton>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import { cancelOrder, getOrders } from "../../api/order";
import { useRouter } from "vue-router";
import { showConfirmDialog, showToast } from "vant";
export default {
  setup() {
    const data = reactive({
      orders: [],
      active: 1,
      loading: true,
      show: false,
      activeName: 1,
      receive: [],
      loadings: false
    });
    const router = useRouter();

    const events = {
      onRefresh() {
        setTimeout(() => {
          data.loadings = false;
        }, 500);
      },
      isShow(val) {
        if (val.receives.length != 0) {
          data.show = true;
          data.receive = val.receives;
        } else {
          showToast("暂无收货信息");
        }
      },
      tabac(index) {
        data.active = index.name + 1;
        data.loading = true;
        getOrder();
      },
      //取消订单
      cancel(val) {
        // console.log(val);
        showConfirmDialog({
          title: "提示",
          message: "确认取消订单吗?",
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          confirmButtonColor: "#ff0000"
        })
          .then(() => {
            cancelOrder({
              id: val.id
            }).then(res => {
              // data.loading = true;
              if (res.result === 0) {
                val.isAccept = 1;
                val.isCancel = 1;
                showToast("取消订单成功");
              }
            });
            // 点击确认按钮后执行的操作
          })
          .catch(() => {
            // 点击取消按钮后执行的操作
          });
      },

      shouhuo(val) {
        console.log(val);
        router.push("/order/receive/" + val);
      }
    };
    //查询订单方法
    const getOrder = () => {
      getOrders({
        type: data.active,
        page: 1,
        limit: 9999
      }).then(res => {
        if (res.result === 0) {
          data.orders = res.data.data;
          data.loading = false;
        }
      });
    };

    onMounted(() => {
      getOrder();
    });
    return {
      ...toRefs(data),
      ...events
    };
  }
};
</script>

<style scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 280px;
  /* height: 280px; */
  background-color: #fff;
  border-radius: 20px;
}
.pendingOrders {
  width: 40px;
  position: relative;
  bottom: 65px;
  right: 90px;
  float: right;
}

.shippeds {
  display: block;
  width: 40px;
  /* transform: rotate(70deg); */
  position: relative;
  right: 20px;
  bottom: 60px;
  float: right;
}
.shippedad {
  display: block;
  width: 40px;
  /* transform: rotate(-50deg); */
  position: relative;
  right: 70px;
  bottom: 70px;
  float: right;
}

.shippeda {
  display: block;
  width: 40px;
  transform: rotate(-50deg);
  position: relative;
  right: 70px;
  bottom: 70px;
  float: right;
}
.shippeds {
  width: 40px;
  position: relative;
  right: 20px;
  bottom: 70px;
  float: right;
}

.shipped {
  width: 40px;
  position: relative;
  right: 30px;
  bottom: 70px;
  float: right;
}

.shouhuo {
  margin-left: 20px;
  font-size: 11px;
  color: rgb(25, 137, 250);
}

.tag4 {
  margin-left: 5px;
  background-color: #909090;
  font-size: 10px;
  color: #fff;
  border-radius: 3px;
  padding: 2px;
}
.but3 {
  padding: 0;
  margin-top: 3px;
  width: 60px;
  float: right;
}

.but2 {
  padding: 0;
  margin-top: 3px;
  width: 40px;
  float: right;
}

.ing2 {
  font-size: 12px;
  float: right;
  margin: 5px 0 5px 0;
}

del {
  color: red;
}

.priceok {
  font-size: 12px;
  float: right;
  margin-top: 5px;
}

.priceok span {
  color: red;
}

.totalok3 {
  font-size: 12px;
  float: right;
  right: 15px;
  margin: 5px 0 5px 0;
}

.totalok2 {
  font-size: 11px;
  float: right;
  margin: 0;
  color: red;
  font-weight: bolder;
}

.totalok {
  font-size: 12px;
  float: right;
  right: 15px;
  margin: 5px 0 5px 0;
  color: red;
}

.imgok {
  position: absolute;
  right: 60px;
  bottom: 60px;
}

.img2 {
  position: absolute;
  right: 60px;
  bottom: 50px;
}

.div2 {
  margin-top: 5px 0 5px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  /* height: 80px; */
}

.div3 {
  margin-top: 5px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  height: 80px;
}

.div4 {
  margin-top: 5px 0 5p 0;
  border-top: 1px solid #eee;
}

.div1 {
  margin-top: 5px 0 5px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.xiadans {
  position: relative;
  left: 40px;
  color: #909090;
  font-size: 10px;
}

.xiadan {
  color: #909090;
  font-size: 10px;
}

.total {
  font-size: 13px;
  position: absolute;
  right: 15px;
  top: 90px;
}

.date3 {
  padding-top: 30px;
  padding-left: 48px;
  color: #909090;
  font-size: 12px;
  margin: 0px;
}

.date2 {
  padding-top: 30px;
  padding-bottom: 5px;
  padding-left: 48px;
  color: #909090;
  font-size: 12px;
  margin: 0px;
}

.date {
  padding-top: 30px;
  padding-left: 48px;
  color: #909090;
  font-size: 12px;
  margin: 0px;
  padding-bottom: 5px;
}

.pricenum {
  margin-top: 5px;
  margin-left: 40px;
  font-size: 12px;
  margin-bottom: 0px;
}

.count {
  margin-top: 7px;
  /* margin-left: 4px; */
  font-size: 12px;
  margin-bottom: 0;
}

.price2 {
  margin-top: 7px;
  margin-left: 20px;
  font-size: 12px;
  margin-bottom: 0;
}

.price {
  margin-top: 5px;
  margin-left: 20px;
  font-size: 12px;
  margin-bottom: 0;
}

.specifications3 {
  width: 50px;
  margin-top: 5px;
  margin-left: 10px;
  font-size: 12px;
  margin-bottom: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.specifications2 {
  margin-top: 7px;
  margin-left: 10px;
  font-size: 12px;
  margin-bottom: 0;
}

.specifications {
  margin-top: 7px;
  /* margin-left: 10px; */
  font-size: 12px;
  margin-bottom: 0;
}

.content2 {
  margin-top: 5px;
  margin-left: 8px;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.content {
  margin-top: 5px;
  margin-bottom: 0;
  margin-left: 8px;
  font-size: 12px;
  width: 70px;
  height: 22px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.exam-container {
  margin: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding: 10px;
  border-radius: 2px;
}

.ordernum {
  float: right;
  color: skyblue;
  font-size: 12px;
}

.img {
  margin-top: 5px;
  border-radius: 5px;
}

.hr {
  width: 100%;
  border-top: 1px solid #eee;
  /* 设置顶部边框，可以调整宽度、样式和颜色 */
  height: 1rpx;
  /* 高度设置为0，使得元素看上去像一条线 */
  margin: 0px;
  /* 设置上下外边距，可以调整 */
}
</style>